<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>变形转换</title>
    <link rel="stylesheet" href="translate.css">
</head>

<body>
    <h2>translate</h2>
    <div class="big">
        <div class="box b1">b1</div>
        <div class="box b2">b2</div>
        <!-- 
        1.translate是相当于自己的一个偏移.
        2.没有脱离文档流
        3.可以和绝对定位叠加，transform是以定位后的位置为基准。
    -->
    </div>
    <h2>rotate</h2>
    <div class="box b3"></div>
    <h2>scale </h2>
    <div class="box b4">
        scale
    </div>
    <div class="img-box">
        <img src="./a5.jpg" alt="">
    </div>
    <h2>transform-origin</h2>
    <div class="box b5">b5</div>
</body>

</html>